<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <script src="../../assets/js/base.js"></script>
    <link rel="stylesheet" href="../../assets/css/user.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
    <header class="align-center header">
        <img class="logo" src="../../assets/images/logo.png" />
        <a class="nav active" href="#">首页</a>
        <a class="nav" href="#">选课中心</a>
        <a class="nav" href="#">用户中心</a>
        <a class="nav" href="#">习激励榜</a>

        <a class="help-link" href="#">帮助</a>
        <div class="login-out">退出</div>
    </header>

    <main class="container">
        <header class="menu align-center">
            <span class="active" data-key="user-info">个人信息</span>
            <span data-key="update-password">修改密码</span>
        </header>

        <!-- 用户信息 -->
        <section class="wrap user-info">
            <section class="align-start flex">
                <div class="avatar-box">
                    <input type="file" placeholder="none" />
                </div>
                <div class="content">
                    <div class="title">基本信息</div>
                    <div class="row user-id">20230331DD</div>
                    <div class="row color_6 f14">上次登陆时间：2023-12-24 24：24：24</div>
                    <div class="row color_6 f14">登录次数：523</div>


                    <div class="title mt-30">私人信息</div>
                    <div class="row align-center">
                        <span class="label color_6">注册时间：</span>
                        <span class="iconfont llzhuceshijian f16"></span>
                        <span class="value">2023-12-24 16：24</span>
                    </div>
                    <div class="row align-center">
                        <span class="label befor-star color_6">学校名称：</span>
                        <input class="schoolName input-value" type="text" placeholder="请输入学校名称" />
                    </div>
                    <div class="row align-center">
                        <span class="label befor-star color_6">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级：</span>
                        <input class="schoolName input-value" type="text" placeholder="请输入年级" />
                    </div>
                    <div class="row align-center">
                        <span class="label befor-star color_6">班&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级：</span>
                        <input class="schoolName input-value" type="text" placeholder="请输入班级" />
                    </div>
                    <div class="row align-center">
                        <span class="label befor-star color_6">真实姓名：</span>
                        <input class="schoolName input-value" type="text" placeholder="请输入真实姓名" />
                        <span class="tips f12">真实姓名只能修改一次</span>
                    </div>
                    <div class="row align-center f14" style="padding: 2rem 0;">
                        <span class="label color_6">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</span>
                        <input class="sex" type="radio" value="0" checked="checked"></input>
                        <span class="sex color_6">男</span>
                        <input class="sex" type="radio" value="1"></input>
                        <span class="sex color_6">女</span>
                    </div>
                    <div class="row align-center">
                        <span class="label color_6">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：</span>
                        <input class="schoolName input-value" type="text" placeholder="请输入年龄" />
                    </div>
                    <div class="row align-center">
                        <span class="label color_6">生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日：</span>
                        <input class="schoolName input-value" type="text" placeholder="请输入生日日期" />
                        <span class="tips f12">阳历</span>
                    </div>
                    <div class="row align-center">
                        <span class="label befor-star color_6">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：</span>
                        <div class="input-value align-center">
                            <select class="flex-wid">
                                <option value="2">北京市</option>
                            </select>
                            <select class="flex-wid">
                                <option value="2">北京市</option>
                            </select>
                            <select class="flex-wid">
                                <option value="1">东城区</option>
                                <option value="2">西城区</option>
                            </select>
                        </div>
                    </div>
                    <div class="row align-center">
                        <span class="label color_6">家庭住址：</span>
                        <input class="schoolName input-value" type="text" placeholder="请输入家庭住址" />
                    </div>
                    <div class="row align-center">
                        <span class="label befor-star color_6">籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯：</span>
                        <div class="input-value align-center">
                            <select class="flex-wid">
                                <option value="2">北京市</option>
                            </select>
                            <select class="flex-wid">
                                <option value="2">北京市</option>
                            </select>
                            <select class="flex-wid">
                                <option value="1">东城区</option>
                                <option value="2">西城区</option>
                            </select>
                        </div>
                    </div>

                    <div class="title mt-30">联系方式</div>
                    <div class="row align-center">
                        <span class="label color_6 befor-star">手机号码：</span>
                        <input class="schoolName input-value" type="text" placeholder="请输入手机号码" />
                    </div>
                    <div class="row align-center">
                        <span class="label color_6">QQ 号码：</span>
                        <input class="schoolName input-value" type="text" placeholder="请输入QQ号码" />
                    </div>
                    <div class="row align-center">
                        <span class="label color_6">微 信 号：</span>
                        <input class="schoolName input-value" type="text" placeholder="请输入微信号" />
                    </div>

                    <button class="btn save">保存</button>
                </div>
            </section>
        </section>

        <!-- 修改密码 -->
        <section class="wrap update-password">
            <section class="align-start flex">
                <div class="avatar-box">

                </div>
                <section class="content">
                    <div class="title">基本信息</div>
                    <div class="row align-center">
                        <span class="label color_6">原 密 码：</span>
                        <input class="old-password input-value" type="text" placeholder="请输入原密码" />
                    </div>
                    <div class="row align-center">
                        <span class="label color_6">新 密 码：</span>
                        <input class="new-password input-value" type="text" placeholder="请输入新密码" />
                    </div>
                    <div class="row align-center">
                        <span class="label color_6">确认密码：</span>
                        <input class="real-password input-value" type="text" placeholder="请再次输入新密码" />
                    </div>
                    <button class="btn update">保存</button>
                </section>
            </section>
        </section>
    </main>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.4/layui.min.js"></script>
<script>
    $(function () {
        // 切换选项
        $('.menu>span').on('click', function () {
            $('.menu>span').removeClass('active')
            $(this).addClass('active')

            console.log($(this).attr('data-key'))
            $('.wrap').hide()
            $(`.${$(this).attr('data-key')}`).show()
        })

        // 选择性别
        $('input.sex').on('click', function () {
            $('input.sex').attr('checked', false)
            $(this).prop('checked', 'checked')
            // console.log($(this).val())
        })

        // 修改密码
        $('.update').on('click', function () {

        })
    })
</script>

</html>